<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<div class="lesson-page-wrapper">
    <div class="adoc-content" th:replace="doc:SecurePasswords_intro.adoc"></div>
</div>

<div class="lesson-page-wrapper">
    <div class="adoc-content" th:replace="doc:SecurePasswords_1.adoc"></div>
</div>

<div class="lesson-page-wrapper">
    <div class="adoc-content" th:replace="doc:SecurePasswords_2.adoc"></div>
</div>

<div class="lesson-page-wrapper">
    <div class="adoc-content" th:replace="doc:SecurePasswords_assignment_introduction.adoc"></div>
    <div class="attack-container">
        <div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
        <form class="attack-form" accept-charset="UNKNOWN"
              method="POST" name="form"
              action="/WebGoat/SecurePasswords/assignment"
              autocomplete="off">
            <table>
                <tr>
                    <td><label>Password</label></td>
                    <td><input id="myInput" name="password" value="" type="password" placeholder="Enter a secure password"/></td>
                    <td><input type="checkbox" onclick="javascript:myFunction()"/>Show password</td>
                </tr>
                <tr>
                    <td><button type="SUBMIT">Submit</button></td>
                </tr>
            </table>
        </form>
        <div class="attack-feedback"></div>
        <div class="attack-output"></div>
    </div>
</div>

<div class="lesson-page-wrapper">
    <div class="adoc-content" th:replace="doc:SecurePasswords_3.adoc"></div>
</div>

<div class="lesson-page-wrapper">
    <div class="adoc-content" th:replace="doc:SecurePasswords_4.adoc"></div>
</div>

<script>
function myFunction() {
  var x = document.getElementById("myInput");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}
</script>


</html>